import React, {Component} from 'react';
import {  Modal,  Form,  Input,  Select,  DatePicker,  Popconfirm
    ,  Row,  Col,  Button,  Icon,  Upload,  message,Table,Pagination} from 'antd';

class _Modal extends Component {

  constructor(props) {
    super(props);
    this.state = {page:1,pageSize:10,orderBy:'createAt',filter:{},data:{list:[]}};
    this.updateList()
  }
  async updateList(nstate={}){
      nstate = Object.assign({},this.state,nstate) //全备份
      var res = await PurchaseModel.fetch({
          filter:nstate.filter,
          orderBy:nstate.orderBy,
          startPos:nstate.pageSize*(nstate.page-1),
          limit:nstate.pageSize
      })
      if(res.status == 'success'){
          message.success("更新成功")
          nstate.data = res.data
          this.setState(nstate)
      }else{
          message.error('更新失败')
      }
    } 

  filterCallback(filter){
      this.updateList({filter})
  }
  async return2Father(id,item){ //update or create
      if('cnum' in item){
          let n = await PurchaseModel.updateById(id,item)
          if(n.status == 'success'){
              message.success(item.cnum+' 更新成功')
          }else{
              message.error(item.cnum+' 更新失败')
          }
      }else {
          let n = await PurchaseModel.addItem(item)
          if(n.status == 'success'){
              message.success(n.data.item.cnum+' 添加成功')
          }else{
              message.error(n.data.item.cnum+' 添加失败')
          }
      }
      this.updateList({})
  }
  async confirm(id){
      let _id = id || '';
      let re=await PurchaseModel.deleteById(_id);
      if(re.status == 'success'){
          message.success(re.data.item.cnum+' 删除成功')
      }else{
          message.success(re.data.item.cnum+' 删除失败')
      }
  }
  async cancel(id){
      console.log('正在取消中');
  }
  async setOut(item) { //status -> out
  console.log(zheng);
  }
  render() {
    let filter={}
    const columns = [
        {
          title: 'PI',
          dataIndex: 'productIdentity',
          key: 'productIdentity',
          render: text => <a href="">{text}</a>,
        },{
          title: '产品型号',
          dataIndex: 'productNum',
          key: 'productNum',
          render: text => <a href="">{text}</a>,
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          key: 'productName',
          render: text => <a href="">{text}</a>,
        },
        {
          title: '产品数量',
          dataIndex: 'productCount',
          key: 'productCount',
          render: text => <a href="">{text}</a>,
        },{
          title: '采购金额（原币）',
          dataIndex: 'productPrice',
          key: 'productPrice',
          render: text => <a href="">{text}</a>,
        },
        {
          title: '供应商名称',
          dataIndex: 'supplierName',
          key: 'supplierName',
          render: (text,record) => (<a href="">{(record)=>{Array.from(record.orders||[]).map(v=>{v.orderNum})}}</a>),
        },{
          title: '品牌',
          dataIndex: 'brandName',
          key: 'brandName',
          render: text => <a href="">{text}</a>,
        },
        {
          title: '订单数量',
          dataIndex: 'orderNum',
          key: 'orderNum',
          render: (text,record) => (<a href="">{(record)=>{Array.from(record.orders||[]).map(v=>{v.orderNum})}}</a>),
        },
        {
          title: '货品状态',
          dataIndex: 'state',
          key: 'state',
          render: (text,record) => (<a href="">{(record)=>{Array.from(record.orders||[]).map(v=>{v.orderNum})}}</a>),
        }
      ];
    return (
      <div>
            <Row>
              <Col span={12}>产品详细参数表</Col>
              <Col span={12}>
                  <Row type="flex" justify="end">
                      <Col>
                        <Button><Icon type="plus" />添加</Button>
                       </Col>
                  </Row>
              </Col>
            </Row>
            <FilterPanel filter={filter} filterCallback={f=>this.filterCallback(f)}/>
            <Table columns={columns} dataSource={this.state.data.list}
                rowKey={record => record._id} pagination={false} scroll={{ x: 1000}}/>
            <Pagination className="ant-table-pagination"
              total={this.state.data.count} current={this.state.page} pageSize={this.state.pageSize} showSizeChanger
              showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
              onChange={(page, pageSize)=>{this.updateList({page:page})}}
              onShowSizeChange={(current, size)=>this.updateList({pageSize:size})}/>
      </div>
    );
  }
}

export default _Modal;